<template>

  <div>
    <div style="background-color: #bfcbd9;height: 40px;line-height:40px"><h2 style="margin-left: 10px">查询条件</h2></div>
    异常单号：<el-input v-model="exId" style="width: 15%;margin: 15px" placeholder="异常单号"></el-input>
    客户订单号：<el-input v-model="oId" style="width: 15%;margin: 15px" placeholder="客户订单号"></el-input>
    派车单号：<el-input v-model="cId" style="width: 15%;margin: 15px" placeholder="派车单号"></el-input>
    异常类型：<el-input v-model="exceptionType" style="width: 15%;margin: 15px" placeholder="异常类型"></el-input>
    <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
    <el-button type="info" icon="el-icon-refresh-right" @click="clean">重置</el-button>

    <div style="background-color: #bfcbd9;height: 40px;line-height:40px"><h2 style="margin-left: 10px">未处理异常单号</h2></div>

    <el-table
      ref="arr"
      :data="exceptionRegistrations"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        prop="id"
        label="异常单号"
        width="120">
      </el-table-column>

      <el-table-column
        prop="oId"
        label="客户订单号"
        width="120">
      </el-table-column>

      <el-table-column
        prop="cId"
        label="派车单号"
        width="120">
      </el-table-column>

      <el-table-column
        prop="createdTime"
        label="反馈时间"
        width="120">
      </el-table-column>

      <el-table-column
        prop="exceptionType"
        label="异常类型"
        width="160">
      </el-table-column>

      <el-table-column
        prop="processingProgress"
        label="处理进度"
        width="120">
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button @click="queryExceptionInfo(scope.row)" size="small" type="primary">管理</el-button>
        </template>
      </el-table-column>

    </el-table>

<!--    分页插件-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

<!--    弹窗-->
    <el-dialog :visible.sync="dialogFormVisible" style="width: 2100px" title="异常登记">
      <h2>派车单信息</h2>
      <el-table :data="dispatchCenter">
        <el-table-column prop="exceptionId" label="异常单号" width="100"></el-table-column>
        <el-table-column prop="dispatchId" label="派车单号" width="100"></el-table-column>
        <el-table-column prop="dispatchOrderId" label="客户单号" width="100"></el-table-column>
        <el-table-column prop="dispatchRoute" label="路线" width="100"></el-table-column>
        <el-table-column prop="dispatchAppointTime" label="指派时间" width="100"></el-table-column>
        <el-table-column prop="dispatchCarCarrier" label="承运商" width="100"></el-table-column>
        <el-table-column prop="dispatchCarPlate" label="车辆" width="100"></el-table-column>
        <el-table-column prop="dispatchCarDriver" label="司机" width="100"></el-table-column>
        <el-table-column prop="rtime" label="回单时间" width="100"></el-table-column>
      </el-table>

      <hr>
      <br>
      <h2>异常信息</h2>
      <el-form :inline="true" class="demo-form-inline" disabled>
        <el-form-item label="当前节点" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="exceptionInfo.dispatchNode"></el-input>
        </el-form-item>

        <el-form-item label="异常类型" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="exceptionInfo.exceptionType"></el-input>
        </el-form-item>
      </el-form>

      <el-form :inline="true" class="demo-form-inline" disabled>
        <el-form-item :label-width="formLabelWidth" disabled label="反馈人">
          <el-input autocomplete="off" v-model="exceptionInfo.name"></el-input>
        </el-form-item>

        <el-form-item label="发现时间" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="exceptionInfo.discoveryTime"></el-input>
        </el-form-item>
      </el-form>

      <el-form :inline="true" class="demo-form-inline" disabled>
        <el-form-item label="反馈方式" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="exceptionInfo.feedbackMode"></el-input>
        </el-form-item>

        <el-form-item label="反馈时间" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="exceptionInfo.createdTime"></el-input>
        </el-form-item>
      </el-form>

      <el-form disabled>
        <el-form-item :label-width="formLabelWidth" label="异常说明">
          <el-input autocomplete="off" v-model="exceptionInfo.exceptionDesc"></el-input>
        </el-form-item>
      </el-form>

      <br><br>
      <h2>异常处理</h2>
      <hr>

      <el-form>
        <el-form-item label="异常影响" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="exceptionHandling.exceptionEffect"></el-input>
        </el-form-item>
      </el-form>

      <el-form>
        <el-form-item label="责任认定" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="exceptionHandling.responsibilityAttribution"></el-input>
        </el-form-item>
      </el-form>

      <el-form>
        <el-form-item label="事故原因" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="exceptionHandling.causeAccident"></el-input>
        </el-form-item>
      </el-form>

      <el-form>
        <el-form-item label="处理方式" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="exceptionHandling.treatmentMethod"></el-input>
        </el-form-item>
      </el-form>

      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="赔偿客户金额" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="exceptionHandling.compensationAmount"></el-input>
        </el-form-item>

        <el-form-item label="承运商承担金额" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="exceptionHandling.commitmentAmount"></el-input>
        </el-form-item>
      </el-form>

      <el-button @click="exHandling" size="small" style="margin-left: 450px" type="primary">确认</el-button>
      <el-button @click="dialogFormVisible=false" size="small" type="primary">关闭</el-button>

    </el-dialog>

  </div>

</template>

<script>
    export default {
        name: "inputException",
       data() {
        return {
          exceptionRegistrations: [],
          arr: [],
          //分页
          currentPage: 1,
          pageSize: 2,
          pageSizes: [10, 20, 30],
          total: 0,
          //搜索
          exId: "",
          oId: "",
          cId: "",
          exceptionType: "",
          //弹窗
          formLabelWidth: "120px",
          exceptionHandling:{},
          dispatchCenter:[],
          // 异常信息
          exceptionInfo: {},
          dialogFormVisible: false,
          exceptionNo:"",

        }
      },
      methods: {
          //搜索重置
        clean(){
          this.exId = "";
          this.oId = "";
          this.cId = "";
          this.exceptionType = "";
        },
        //派车单信息回显
        queryDispatchCenter(row){
          this.dialogFormVisible=true;

          this.$http({
            method:"get",
            url:"http://localhost/exceptionRegistration/ById",
            params:{
              id:row.id,
              cId:row.cId,
              oId:row.oId
            }
          }).then(resp=>{
            console.log(resp)
            this.dispatchCenter = resp.data.data;
          })
        },
        //异常处理
        exHandling() {
          this.$http({
            method: "post",
            url: "http://localhost/exceptionHandling/"+this.exceptionNo,
            data: this.exceptionHandling
          }).then(resp => {
            console.log(resp)
            console.log(resp.data.msg)
            this.dialogFormVisible = false;
            this.findAll(this.currentPage,this.pageSize,this.exId,this.oId,this.cId,this.exceptionType)
            this.$message({
              message: '保存成功',
              type: 'success'
            });
          })
        },
        //弹窗异常信息回显
        queryExceptionInfo(row) {
          // 展示
          this.dialogFormVisible = true;
          this.$http({
            method: "get",
            url: "http://localhost/exceptionHandling",
            params: {
              id: row.id,
            }
          }).then(resp => {
            console.log(resp)
            // 拿到数据
            this.exceptionInfo = resp.data.data;
            this.exceptionNo = resp.data.data.id;
            this.queryDispatchCenter(row)
            console.log(resp.data.data.id)
          })
        },
        //查询所有
        findAll(currentPage, pageSize, exId, oId, cId, exceptionType) {
          this.$http({
            method: "get",
            url: "http://localhost/exceptionRegistration",
            params: {
              currentPage: currentPage,
              pageSize: pageSize,
              exId: exId,
              oId: oId,
              cId: cId,
              exceptionType: exceptionType
            }
          }).then(resp=>{
            console.log(resp)
            this.exceptionRegistrations = resp.data.data.list;
            this.total = resp.data.data.total;
          })
        },
        //搜索
        search(){
          this.findAll(this.currentPage,this.pageSize,this.exId,this.oId,this.cId,this.exceptionType)
        },
          //分页
        handleCurrentChange(val){
          this.currentPage = val;
          this.findAll(this.currentPage,this.pageSize,this.exId,this.oId,this.cId,this.exceptionType)
        },
        handleSizeChange(val){
          this.pageSize = val;
          this.findAll(this.currentPage,this.pageSize,this.exId,this.oId,this.cId,this.exceptionType)
        },
          //下拉框多选
        handleSelectionChange(val){
          this.arr = val;
        }
      },
      created() {
        // 查询 所有 列表数据展示
        this.findAll(this.currentPage,this.pageSize,this.exId,this.oId,this.cId,this.exceptionType)
      }
    }
</script>

<style scoped>

</style>
